<template>
  <div class="app-wrapper">
    <div class="register-box">
      <h3>修改登录密码</h3>
      <el-form :model='passwordForm' status-icon :rules='rules' ref='passwordForm' class='login-form'>
        <el-form-item prop='passwordOld' label='请填写旧密码'>
          <el-input type='password' v-model='passwordForm.passwordOld'></el-input>
        </el-form-item>
        <el-form-item prop='password1' label='请填写密码'>
          <el-input type='password' v-model='passwordForm.password1'></el-input>
        </el-form-item>
        <el-form-item prop='password2' label='确认密码'>
          <el-input type='password' v-model='passwordForm.password2'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click="submitForm('passwordForm')" :loading='loading' style='width:100%'>提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { changePass } from '@/api/register';
import { removeToken } from '@/utils/auth';

export default {
  data() {
    var validPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入正确的密码'));
      } else if (value != this.passwordForm.password1) {
        callback(new Error('请输入正确的密码'));
      } else {
        callback();
      }
    };
    return {
      wHeight: 0,
      passwordForm: {
        passwordOld: '',
        password1: '',
        password2: ''
      },
      rules: {
        passwordOld: [
          {
            required: true,
            min: 6,
            max: 8,
            message: '请设置正确的旧密码',
            trigger: 'blur'
          }
        ],
        password1: [
          {
            required: true,
            min: 6,
            max: 24,
            message: '请设置登录密码,长度在6-24个字符',
            trigger: 'blur'
          }
        ],
        password2: [{ required: true, validator: validPass, trigger: 'blur' }]
      },
      loading: false
    };
  },
  created() {},
  methods: {
    submitForm(formName) {
      let that = this;
      that.loading = true;
      that.$refs[formName].validate(valid => {
        if (valid) {
          //注册
          changePass(that.passwordForm.passwordOld, that.passwordForm.password1)
            .then(data => {
              that.loading = false;

              //清除缓存资料
              that.$message({
                message: '密码修改成功，请用新密码重新登录系统！',
                type: 'success'
              });
              removeToken();
              that.$router.push({ path: '/login' });
            })
            .catch(function(error) {
              console.log(error);
              that.loading = false;
            });
        } else {
          console.log('error submit!!');
          const h = that.$createElement;
          that.$notify({
            title: '网络链接错误',
            type: 'warning',
            offset: 100,
            message: h(
              'i',
              {
                style: 'color: teal'
              },
              '错误码：210003，请检查网络！'
            )
          });
        }
      });
    }
  }
};
</script>
<style rel='stylesheet/scss' lang="scss" scoped>
@import 'src/styles/mixin.scss';
.app-wrapper {
  @include clearfix;
  width: 100%;
}

.register-box {
  background: #fff;
  width: 500px;
  margin: auto;
  padding: 20px 30px;
  border-radius: 6px;
  h3 {
    text-align: center;
  }
}

.el-cascader {
  width: 100%;
}
</style>
